<template>
        <div class="Footer">
                <van-tabbar v-model="active">
                        <van-tabbar-item to="/" name="home" icon="home-o">首页</van-tabbar-item>
                        <van-tabbar-item to="/lesson" name="search" icon="apps-o">课程</van-tabbar-item>
                        <van-tabbar-item to="/record" name="friends" icon="description">约课记录</van-tabbar-item>
                        <van-tabbar-item to="/practise" name="setting" icon="edit">练习</van-tabbar-item>
                        <van-tabbar-item to="/my" name="my" icon="friends-o">我的</van-tabbar-item>
                </van-tabbar>


                <!-- <Zhezhao></Zhezhao> -->
        </div>
</template>

<script>
        import { Tabbar, TabbarItem } from "vant";
        //  import Zhezhao from "./zhezhao"
        export default {
                name: 'Footer',
                components: {
                        // Zhezhao,
                        [Tabbar.name]: Tabbar,
                        [TabbarItem.name]: TabbarItem,
                },
                data() {
                        return {
                                active: 'home',
                        }
                },
                methods: {
                        toPage(value) {
                                this.active = value
                        }
                },
                mounted() {
                        console.log(this.$route.fullPath)
                        switch (this.$route.fullPath) {
                                case "/":
                                        this.toPage('home')
                                        break;
                                case "/lesson":
                                        this.toPage('search')
                                        break;
                                case "/record":
                                        this.toPage('friends')
                                        break;
                                case "/practise":
                                        this.toPage('setting')
                                        break;
                                case "/my":
                                        this.toPage('my')
                                        break;
                                default:
                                        return
                        }
                }


        }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>